<template>
    <div>
        <router-link class="headerAbs" v-show="showAbs" to="/" tag="div">
            <div class="header-abs-back iconfont">&#xe6c3;</div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
            景点详情
            <router-link to="/">
                <div class="iconfont header-fixed-back">&#xe6c3;</div>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailHeader",
        data(){
            return{
                showAbs:true,
                opacityStyle:{
                    opacity:0
                },
            }
        },
        methods:{
            handleScroll () {
                const top = document.documentElement.scrollTop||document.body.scrollTop;
                if (top > 60) {
                    let opacity = top / 140;
                    opacity = opacity > 1 ? 1 : opacity;
                    this.opacityStyle = { opacity };
                    this.showAbs = false
                } else {
                    this.showAbs = true
                }
            },
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll)
        },
        unmounted () {
            window.removeEventListener('scroll', this.handleScroll)
        }

    }
</script>

<style lang="stylus" scoped>
    @import "~@/assets/Styles/varibles.styl"
    .headerAbs
        position :absolute
        top:.4rem
        left :.4rem
        height :.8rem
        width :.8rem
        border-radius :.4rem
        line-height :.8rem
        text-align: center
        background :rgba(0,0,0,.8)
        .header-abs-back
            color:#fff
            font-size :.4rem
    .header-fixed
        z-index: 2
        position: fixed
        top: 0
        left: 0
        right: 0
        height: $headerHeight
        line-height: $headerHeight
        text-align: center
        color: #fff
        background: $bgColor
        font-size: .32rem
        .header-fixed-back
            position: absolute
            top: 0
            left: 0
            width: .64rem
            text-align: center
            font-size: .4rem
            color: #fff

</style>
